<template>
	<view class="container">
		<image class="bg-img" src="https://img.js.design/assets/img/631d64731154c46b978fbc93.jpg"></image>
		<view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item,i) in swiperList" :key="i">
					<navigator class="'swiper-item" >
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		

		<view class="content">
			<view class="box">
				<view class="box-top">
					<!-- 地图 -->
					<view class="box-left">
						<uni-icons type="location" size="30" @click="showMap"></uni-icons>
						<!-- 显示地图 -->
					</view>
					<view class="box-right">
						<view style="width: 400rpx; height: 70rpx;" @click="search">
							<image style="width: 100%; height: 100%;" src="../../static/icon-box/search.png"></image>
						</view>
					</view>
				</view>
				<!-- 店铺 -->
				<view class="box-bottom">
					<block v-for="(item,id) in introduces" :key="id">
						<view class="box-bottom-item">
							<!-- 照片和名字 -->
							<view class="item-top">
								<view class="item-top-left">
									<!-- 图片的填充 -->
									<image style="width: 100%; height: 100%;" :src="item.imageUrl" mode=""></image>
								</view>
								<!-- 店铺名字 -->
								<view class="item-top-right">
									<text class="shop-name">{{item.name}}</text><br /><br />
									<tex class="shop-introduce">{{item.introduce}}</tex>
								</view>
							</view>
							<!-- 进入店铺 -->
							<view class="item-bottom">
								<text class="shop-name2">{{item.name2}}</text><br />
								<text class="shop-location">位置：{{item.location}}</text><br />
								<text class="shop-location">月销：{{item.sales}}</text><br />
								<view class="togo">
									<text>进入店铺</text>
									<u-icon @click="goShop(item.id)" name="arrow-rightward" size="20"></u-icon>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDish
	} from "../../utils/api/customer.js"
	export default {
		data() {
			return {
				swiperList: [
					{
						image_src:"https://img.js.design/assets/smartFill/img399164da755928.jpg",
					},
					{
						image_src:"https://img.js.design/assets/smartFill/img399164da755928.jpg",
					},
					{
						image_src:"https://img.js.design/assets/smartFill/img399164da755928.jpg",
					}
				],
				show: true,
				//店铺数据
				stores: [{
						id: 0,
						name: "五谷鱼粉",
						name2: "五谷u粉",
						introduce: "0无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "西区餐厅一楼",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"

					}, {
						id: 1,
						name: "五谷u粉",
						name2: "五谷u粉",
						introduce: "1无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A115",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}, {
						id: 2,
						name: "五谷juy粉",
						name2: "五谷u粉",
						introduce: "2无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A118",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					},
					{
						id: 3,
						name: "五谷鱼粉",
						name2: "五谷u粉",
						introduce: "3无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A115",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}, {
						id: 4,
						name: "五谷u粉",
						name2: "五谷u粉",
						introduce: "4无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A115",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}, {
						id: 5,
						name: "五谷juy粉",
						name2: "五谷u粉",
						introduce: "5无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A118",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					},
					{
						id: 6,
						name: "五谷鱼粉",
						name2: "五谷u粉",
						introduce: "6无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A115",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}, {
						id: 7,
						name: "五谷u粉",
						name2: "五谷u粉",
						introduce: "7无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A115",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}, {
						id: 8,
						name: "五谷juy粉",
						name2: "五谷u粉",
						introduce: "8无添加无污染2微软士大夫电风扇电风扇大师傅似的大师傅大师傅",
						location: "8A118",
						sales: 50,
						imageUrl: "https://img.js.design/assets/smartFill/img399164da755928.jpg"
					}
				]
			};
		},
		onLoad() {
			this.getShop()

		},
		computed: {
			introduces() {
				var c = JSON.parse(JSON.stringify(this.stores));
				c.forEach(x => x.introduce = x.introduce.substring(0, 25) + "......");
				return c;
			}
		},
		methods: {
			//点击显示地图
			showMap() {
				console.log("12312")
			},
			//获取店铺信息
			getShop() {
				uni.setStorageSync("TOKEN", 1212)
				getDish()
				console.log("店铺信息")
			},
			goShop(id) {
				uni.navigateTo({
					url: "/subpkgA/shop/shop?id=" + id
				})
			},
			//跳转搜索页面
			search() {
				console.log("搜索")
			}

		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;
	
		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		//opacity: 0.4; 透明度
	}

	.box {
		margin-top: 20rpx;
		background-color: aliceblue;
		// opacity:0.75;
		background: rgba(255, 255, 255, 0.75);
		min-height: 900px;
		width: 100%;
		border-top-left-radius: 25px; //左上角
		border-top-right-radius: 25px; //右上角

		.box-top {
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.box-right {
				width: 50%;
				height: 50rpx;
				margin-top: 20px;
				margin-right: -20px;
			}

			.box-left {
				margin-top: 20px;
				margin-left: -20px;
			}
		}
	}

	.box-bottom {

		margin-top: 40rpx;

		.box-bottom-item {
			// background-color: rgba(255, 255, 255, 0.7);
			height: 450rpx;
			border-style: solid;
			border-image: url("https://img.js.design/assets/img/631d64731154c46b978fbc93.jpg") 30 30 round;
			margin-left: 10px;
			margin-right: 10px;
			border-width: 4px;
			border-radius: 30px;

			//background: rgba(255, 255, 255, 0.7);
			.item-top {
				border-style: solid;
				border-top-right-radius: 30px;
				border-color: rgba(255, 255, 255, 1);
				margin-top: 20rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.item-top-left {
					background-color: aqua;
					width: 40%;
					height: 100px;
				}

				.item-top-right {
					width: 50%;
					margin-top: 15rpx;

					.shop-name {
						font-size: 15px;
						font-weight: 500;
						letter-spacing: 0px;
						line-height: 0px;
						color: rgba(0, 0, 0, 1);
						text-align: left;
					}

					.shop-introduce {
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 0px;
						color: rgba(87, 81, 81, 1);
					}


				}

			}

			.item-bottom {

				margin-top: 3%;
				margin-left: 3%;
				margin-right: 3%;
				border-top: 1px solid rgba(0, 0, 0, 1);

				.shop-name2 {
					font-size: 18px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 0px;
					color: rgba(0, 0, 0, 1);
				}

				.shop-location {
					margin-left: 60rpx;

				}

				.togo {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					margin-left: 70%;
				}
			}

		}
	}
</style>
